<!--
 * @Author: yanjikun
 * @Date: 2021-06-18 10:32:48
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-05-27 15:59:42
 * @Description: file content
-->
<template>
  <Layout class="h-full">
    <YHeader v-model:collapsed="collapsed" v-show="!fullScreen"></YHeader>
    <Layout>
      <Layout.Sider
        v-model:collapsed="collapsed"
        theme="light"
        :trigger="null"
        collapsible
        v-show="!fullScreen"
      >
        <YMenu :collapsed="collapsed" class="h-full" />
      </Layout.Sider>
      <Layout.Content class="flex flex-col">
        <YTabsView v-show="!fullScreen"></YTabsView>
        <div class="m-8px flex-auto">
          <router-view #="{ Component }">
            <template v-if="Component">
              <transition name="fade-transform" mode="out-in" appear>
                <component :is="Component" class="h-full bg-white m-0 overflow-y-auto" />
              </transition>
            </template>
          </router-view>
        </div>
      </Layout.Content>
    </Layout>
  </Layout>
</template>

<script lang="ts" setup>
  import { Layout } from 'ant-design-vue'
  import YMenu from './menu/menu.vue'
  import YHeader from './header/index.vue'
  import YTabsView from './tabs/tabs-view.vue'
  import { computed, ref } from 'vue'
  import { useProjectStore } from '@/store/modules/projectConfig'
  const collapsed = ref(false)
  const projectStore = useProjectStore()
  const fullScreen = computed(() => projectStore.fullScreen)
</script>

<style lang="less" scoped></style>
